<template>
  <div>
    <h2>小王的工资为：{{ num1 }}</h2>
    <button @click="salary(300)">小王涨300</button>
    <h2>小张的工资为：{{ num2 }}</h2>
    <button @click="salary(500)">小张涨500</button>
    <div :class="{ active: true }">班级总收入:{{ totalSalary }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 100000,
      num2: 50000,
    }
  },
  methods: {
    salary(money) {
      if (money === 300) {
        this.num1 += 300
      } else {
        this.num2 += 500
      }
    },
  },

  computed: {
    totalSalary() {
      return this.num1 + this.num2
    },
  },
}
</script>

<style>
.active {
  width: 300px;
  height: 100px;
  background-color: pink;
  border-radius: 50px;
  text-align: left;
  line-height: 100px;
}
</style>
